<template>
  <div class="options__page edit-main__page">
    <h3>站点配置</h3>
    <el-form label-position="top" size="mini">
      <el-form-item label="设置站点页头图:">
        <clientHdeaderImage :image="headerImage" />
      </el-form-item>
      <el-form-item label="设置站点页LOGO:">
        <clientLogoModule :image="logo" />
      </el-form-item>
      <el-form-item label="备案号:">
        <inputEditorModule :value="useBeian" group="client" name="beian" />
      </el-form-item>
      <el-form-item label="举报邮箱:">
        <inputEditorModule :value="useHelpEmail" group="client" name="helpEmail" />
      </el-form-item>
      <el-form-item label="联系邮箱:">
        <inputEditorModule :value="useServiceEmail" group="client" name="serviceEmail" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getOptionAPI } from "@/api/utils";
import clientHdeaderImage from "./components/clientHeaderImageModule.vue";
import clientLogoModule from "./components/clientLogo.vue";
import inputEditorModule from "./components/inputEditor.vue";

export default {
    components: {
        clientHdeaderImage,
        clientLogoModule,
        inputEditorModule,
    },
    data() {
        return {
            selfBeian: "",
            selfHelpEmail: "",
            selfServiceEmail: "",
            options: {},
        };
    },
    computed: {
        headerImage() {
            try {
                return this.options.headerImage.value || "";
            } catch (error) {
                return "";
            }
        },
        logo() {
            try {
                return this.options.logo.value || "";
            } catch (error) {
                return "";
            }
        },
        useBeian() {
            try {
                return this.options.beian.value || "";
            } catch (error) {
                return "";
            }
        },
        useHelpEmail() {
            try {
                return this.options.helpEmail.value || "";
            } catch (error) {
                return "";
            }
        },
        useServiceEmail() {
            try {
                return this.options.serviceEmail.value || "";
            } catch (error) {
                return "";
            }
        },
    },
    mounted() {
        this.getClientOptions();
    },
    methods: {
        async getClientOptions() {
            const result = await getOptionAPI("client");
            this.options = result.data.reduce((pv, v) => {
                pv[v.name] = v;
                return pv;
            }, {});
            console.log(this.options);
        },
    },
};
</script>

<style lang="scss" src="./style/index.scss" />
